<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>樱花</title>
</head>

<body>
  <!-- <div id="CopyText1" onclick="execClick();" oncopy="execCopy(event,'CopyText1');"></div> -->
  <script>
    function execClick() {
      document.execCommand("copy");
    }
    function execCopy(event, CopyText) {
      var thisDiv = document.getElementById(CopyText);
      if (isIE()) {
        if (window.clipboardData) {
          window.clipboardData.setData("Text", thisDiv.textContent);
          window.clipboardData.getData("Text");
          alert("复制成功da☆ze")
        }
      } else {
        event.preventDefault();
        if (event.clipboardData) {
          event.clipboardData.setData("text/plain", thisDiv.textContent);
          event.clipboardData.getData("text");
          alert("复制成功da☆ze")
        }
      }
    }
    function isIE() {
      var input = window.document.createElement("input");
      if (window.ActiveXObject === undefined) return null;
      if (!window.XMLHttpRequest) return 6;
      if (!window.document.querySelector) return 7;
      if (!window.document.addEventListener) return 8;
      if (!window.atob) return 9;
      if (!input.dataset) return 10;
      return 11;
    }
    //樱花，图片是从qq上扒的

    var stop, staticx;
    var img = new Image();
    img.src = "";

    function Sakura(x, y, s, r, fn) {
      this.x = x;
      this.y = y;
      this.s = s;
      this.r = r;
      this.fn = fn;
    }

    Sakura.prototype.draw = function (cxt) {
      cxt.save();
      var xc = 40 * this.s / 4;
      cxt.translate(this.x, this.y);
      cxt.rotate(this.r);
      cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
      cxt.restore();
    }

    Sakura.prototype.update = function () {
      this.x = this.fn.x(this.x, this.y);
      this.y = this.fn.y(this.y, this.y);
      this.r = this.fn.r(this.r);
      if (this.x > window.innerWidth ||
        this.x < 0 ||
        this.y > window.innerHeight ||
        this.y < 0
      ) {
        this.r = getRandom('fnr');
        if (Math.random() > 0.4) {
          this.x = getRandom('x');
          this.y = 0;
          this.s = getRandom('s');
          this.r = getRandom('r');
        } else {
          this.x = window.innerWidth;
          this.y = getRandom('y');
          this.s = getRandom('s');
          this.r = getRandom('r');
        }
      }
    }

    SakuraList = function () {
      this.list = [];
    }
    SakuraList.prototype.push = function (sakura) {
      this.list.push(sakura);
    }
    SakuraList.prototype.update = function () {
      for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update();
      }
    }
    SakuraList.prototype.draw = function (cxt) {
      for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt);
      }
    }
    SakuraList.prototype.get = function (i) {
      return this.list[i];
    }
    SakuraList.prototype.size = function () {
      return this.list.length;
    }

    function getRandom(option) {
      var ret, random;
      switch (option) {
        case 'x':
          ret = Math.random() * window.innerWidth;
          break;
        case 'y':
          ret = Math.random() * window.innerHeight;
          break;
        case 's':
          ret = Math.random();
          break;
        case 'r':
          ret = Math.random() * 6;
          break;
        case 'fnx':
          random = -0.5 + Math.random() * 1;
          ret = function (x, y) {
            return x + 0.5 * random - 1.7;
          };
          break;
        case 'fny':
          random = 1.5 + Math.random() * 0.7
          ret = function (x, y) {
            return y + random;
          };
          break;
        case 'fnr':
          random = Math.random() * 0.03;
          ret = function (r) {
            return r + random;
          };
          break;
      }
      return ret;
    }

    function startSakura() {

      requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;
      var canvas = document.createElement('canvas'),
        cxt;
      staticx = true;
      canvas.height = window.innerHeight;
      canvas.width = window.innerWidth;
      canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
      canvas.setAttribute('id', 'canvas_sakura');
      document.getElementsByTagName('body')[0].appendChild(canvas);
      cxt = canvas.getContext('2d');
      var sakuraList = new SakuraList();
      for (var i = 0; i < 50; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new Sakura(randomX, randomY, randomS, randomR, {
          x: randomFnx,
          y: randomFny,
          r: randomFnR
        });
        sakura.draw(cxt);
        sakuraList.push(sakura);
      }
      stop = requestAnimationFrame(function () {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        sakuraList.update();
        sakuraList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee);
      })
    }

    window.onresize = function () {
      var canvasSnow = document.getElementById('canvas_snow');
      canvasSnow.width = window.innerWidth;
      canvasSnow.height = window.innerHeight;
    }

    img.onload = function () {
      startSakura();
    }

    function stopp() {
      if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false;
      } else {
        startSakura();
      }
    }
  </script>
</body>

</html>